<template>
  <transition v-on:before-enter="beforeEnter"
              v-on:enter="enter"
              v-on:after-enter="afterEnter"
              v-on:before-leave="beforeLeave"
              v-on:leave="leave"
              v-on:after-leave="afterLeave">
    <slot></slot>
  </transition>
</template>

<script>
import $ from 'jquery';
export default {
  name: 'Collapse',
  data () {
    return {
      show: true
    }
  },
  // methods: {
  //   beforeEnter (el) {
  //     // addClass(el, 'collapse-transition');
  //     $(el).addClass('collapse-transition')
  //     if (!el.dataset) el.dataset = {};

  //     el.dataset.oldPaddingTop = el.style.paddingTop;
  //     el.dataset.oldPaddingBottom = el.style.paddingBottom;

  //     el.style.height = '0';
  //     el.style.paddingTop = 0;
  //     el.style.paddingBottom = 0;
  //   },
  //   enter (el) {
  //     el.dataset.oldOverflow = el.style.overflow;
  //     if (el.scrollHeight !== 0) {
  //       el.style.height = el.scrollHeight + 'px';
  //       el.style.paddingTop = el.dataset.oldPaddingTop;
  //       el.style.paddingBottom = el.dataset.oldPaddingBottom;
  //     } else {
  //       el.style.height = '';
  //       el.style.paddingTop = el.dataset.oldPaddingTop;
  //       el.style.paddingBottom = el.dataset.oldPaddingBottom;
  //     }

  //     el.style.overflow = 'hidden';
  //   },
  //   afterEnter (el) {
  //     // for safari: remove class then reset height is necessary
  //     $(el).removeClass('collapse-transition')
  //     el.style.height = '';
  //     el.style.overflow = el.dataset.oldOverflow;
  //   },
  //   beforeLeave (el) {
  //     if (!el.dataset) el.dataset = {};
  //     el.dataset.oldPaddingTop = el.style.paddingTop;
  //     el.dataset.oldPaddingBottom = el.style.paddingBottom;
  //     el.dataset.oldOverflow = el.style.overflow;

  //     el.style.height = el.scrollHeight + 'px';
  //     el.style.overflow = 'hidden';
  //   },
  //   leave (el) {
  //     if (el.scrollHeight !== 0) {
  //       // for safari: add class after set height, or it will jump to zero height suddenly, weired
  //       $(el).addClass('collapse-transition')
  //       el.style.height = 0;
  //       el.style.paddingTop = 0;
  //       el.style.paddingBottom = 0;
  //     }
  //   },
  //   afterLeave (el) {
  //     $(el).removeClass('collapse-transition')
  //     el.style.height = '';
  //     el.style.overflow = el.dataset.oldOverflow;
  //     el.style.paddingTop = el.dataset.oldPaddingTop;
  //     el.style.paddingBottom = el.dataset.oldPaddingBottom;
  //   }
  // }


  methods: {
    beforeEnter (el) {
      $(el).addClass('collapse-transition')
      el.style.height = '0';
    },
    enter (el) {
      el.style.height = el.scrollHeight + 'px';
    },
    afterEnter (el) {
      // for safari: remove class then reset height is necessary
      $(el).removeClass('collapse-transition')
      el.style.height = '';
    },
    beforeLeave (el) {
      el.style.height = el.scrollHeight + 'px';
    },
    leave (el) {
      console.log(el.scrollHeight)
      $(el).addClass('collapse-transition')
      el.style.height = 0;
    },
    afterLeave (el) {
      $(el).removeClass('collapse-transition')
      el.style.height = '';
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.collapse-transition {
  transition: all 0.3s ease-in-out;
}
</style>
